<template>
<div id="mains">
    <header-tab class="f" title="可以起名字，但没有动画"/>
    <footer-tab/>

    <div id="contents">
        <!-- 轮播图 -->
        <my-swiper :key="homeCarouselList.length" ref="homeSwiper">
            <router-link tag="div" to="/" class="swiper-slide" v-for="item in homeCarouselList" :key="item.channelid">
                <img :src="item.thumb" class="bg" :alt="item.thumb">
            </router-link>
        </my-swiper> 
        <!-- 菜单分类 -->
        <div class="classify-box">
            <classify :class="isFixed? 'isFixed': ''"/>
        </div>
        <!-- 实时新闻消息 -->
        <div class="real-news">
            <ul style="margin:50px 0;text-align:center;">
                <li v-for="item in 50" :key="item">{{item}}</li>
            </ul>
        </div>
    </div>
</div>
</template>

<script>
const Classify = () => import("@/components/Classify")
const MySwiper = () => import("@/components/Swiper")
const HeaderTab = () => import("@/components/HeaderTab")
const FooterTab = () => import("@/components/FooterTab")
import {messageBox} from "@/components/JS"
export default {
	name: "home",
	data() {
		return {
			homeCarouselList: [],
            isFixed: false,
		}
	},
	components: {
		Classify,
        MySwiper,
        HeaderTab,
        FooterTab,
    },
	mounted() {
        this.getCarouselList()
        // body 设置为height:100% 导致window.onscroll 无效
        window.onscroll = this.getHomeScroll
        
        /* messageBox({
            title: "title",
            content: "内容",
            cancel: "取消",
            ok: "确认",
            handleCancel() {
                console.log("CANCEL");
            },
            handleOk() {
                console.log("OK");
            }
        }) */
    },
	methods: {

		// 菜单吸顶
		getHomeScroll() {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            let swiperHeight = this.$refs.homeSwiper? this.$refs.homeSwiper.$el.offsetHeight : 200
			if(scrollTop>=swiperHeight) {
				this.isFixed = true
			} else {
				this.isFixed = false
			}
		},

		// 获取轮播图
		getCarouselList() {
			this.axios.get("https://api.apiopen.top/musicBroadcasting").then(res => {
				// console.log(res.data)
				let list = res.data.result[0].channellist.filter((item, i) => i < 5)
				// console.log(list);
				if(res.data.code === 200) {
                    setTimeout(() => {
                        this.homeCarouselList = list;
                        this.flag = true
                    }, 300)
				}
			}).catch(err => {
				console.log(err)
			})
		}
    },
    watch: {
        "$route.path": function(newVal, oldVal) {
			document.body.scrollTop = document.documentElement.scrollTop = 0
            if(newVal === '/home') {
                this.isFixed = false;
                window.onscroll = this.getHomeScroll
            }
        }   
    },
}
</script>

<style scoped>
#mains .f {
    position: fixed;
    top: 0;
}
#contents {
	overflow: initial;
    margin-top: 50px;
    margin-bottom: 0;
    box-shadow: 0 -5px 10px #bfbfbf;
}
#contents .bg {
    width: 100%;
	height: 100%;
}
#contents .classify-box {
    min-height: 180px;
}
.isFixed {
    position: fixed;
    top: 50px;
    z-index: 50;
}
</style>